<template lang="pug">
div
  app-header(fixed,back,title="自定义订单",v-if="!$helper.isWechat")
  div
    ul.app-tabs
      li(:class="{current: $route.params.type == 'all'}",@click="$router.push({name: 'quick:lists', params: {type: 'all'}})") 我的订单
      li(:class="{current: $route.params.type == 'price'}",@click="$router.push({name: 'quick:lists', params: {type: 'price'}})") 待定价
      li(:class="{current: $route.params.type == 'payment'}",@click="$router.push({name: 'quick:lists', params: {type: 'payment'}})") 待付款
      li(:class="{current: $route.params.type == 'deliver'}",@click="$router.push({name: 'quick:lists', params: {type: 'deliver'}})") 待发货
      li(:class="{current: $route.params.type == 'harvest'}",@click="$router.push({name: 'quick:lists', params: {type: 'harvest'}})") 待收货
    .main-wrapper(ref="mainWrapper")
      div.wrapper-content
        section(v-for="(item,index) in lists",:key="index")
          h3 {{item.created}}
          span.fullname 联系人: {{item.fullname}}
          span.phone 电话: {{item.phone}}
          span.state {{item.state}}
          span.intro {{item.intro}}
          span.price 价格: {{item.price}}
          span.reply {{item.reply}}
</template>

<script>
import { Toast, Button } from 'mint-ui'
import Header from 'components/Header'
import BScroll from 'better-scroll'
export default {
  components: {
    'mt-button': Button,
    'app-header': Header
  },
  data () {
    return {
      mainScroll: null,
      scrolling: false,
      page: 1,
      lists: []
    }
  },
  watch: {
    '$route.params.type': {
      async handler (curVal, oldVal) {
        this.page = 1
        let type = null
        switch (curVal) {
          case 'all':
            type = null
            break
          case 'price':
            type = 1
            break
          case 'payment':
            type = 2
            break
          case 'deliver':
            type = 3
            break
          case 'harvest':
            type = 4
            break
        }
        await this.loadData(type)
        this._initScroll()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    _initScroll () {
      if (!this.mainScroll) {
        this.$nextTick(() => {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
          this.mainScroll.on('scrollStart', () => {
            this.scrolling = true
          })
          this.mainScroll.on('scrollEnd', () => {
            this.scrolling = false
          })
        })
      } else {
        this.mainScroll.refresh()
      }
    },
    async loadData (type = null) {
      let toast = Toast('正在加载..')
      const result = await this.$rpc.invoke('quick_lists', [type, this.page]).complete()
      toast.close()
      this.lists = this._.get(result, 'data.lists')
      this.pageInfo = this._.get(result, 'data.info')
    }
  }
}
</script>
<style lang="stylus" scoped>
.app-tabs
  border-bottom: 1px solid #ccc
  height: 0.9rem
  width: 100%
  li
    float: left
    list-style: none
    height: 100%
    padding: .24rem .3rem
    border-right: 1px solid #ccc
    font-size: .24rem
    cursor: pointer
    &:last-child
      border-right: none
    &.current
      background: #f3f5f7
      color: #06c
.main-wrapper
  position: absolute
  bottom: 0
  left: 0
  right: 0
  top: 1.78rem
  overflow: hidden
  section
    margin: .2rem 0
    padding: .3rem .2rem
    box-sizing: border-box
    background: #eee
    span
      padding: 0 .15rem
</style>
